<template>
	<view class="address">
		<gyd-navbar back-color="#fff" :title="title"></gyd-navbar>

		<scroll-view scroll-y="true" class="address-list">
			<view class="address-item" v-for="(item, index) in list" :key="index" hover-class="u-cell-hover">
				<view class="top" @click="useAddress(item)">
					<view class="left">
						<text class="name">{{ item.consignee }}</text>
						<text class="phone">{{ item.mobile }}
						</text>
						<text class="tag" v-if="item.is_default == 1">默认</text>
					</view>

					<view class="right" @click.stop="delAddress(item)">删 除</view>
				</view>

				<view class="other">
					<text class="site" @click="useAddress(item)">{{ item.select_address }}{{item.address}}</text>
					<u-icon name="edit-pen" :size="30" color="#999999"
						@click="pageRoute('/userPages/address/form?id=' + item.id)"></u-icon>
				</view>
			</view>
		</scroll-view>

		<view class="btn-group">
			<u-button class="btn" shape="circle" @click="pageRoute('/userPages/address/form')">+创建地址</u-button>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		reactive,
		toRefs,
		inject,
		ref,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		title: '地址管理',
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		isMore: true,
		list: []
	});

	//在页面所有元素加载完成后执行（只执行一次）
	onLoad((opt) => {
		console.log('onLoad');
		if (opt.hasOwnProperty('id')) {
			console.log('传递参数', opt.id);
		}
		getList();
	});

	//在页面由不可见变为可见时执行（只要页面显示都会执行）
	onShow(() => {
		console.log('onShow');
		uni.$on('refresh', function(val) {
			if (val) {
				refreshData();
			}
		})
	})

	//在页面解析完成之后执行
	onReady(() => {
		console.log('onReady');
	})

	onPullDownRefresh(() => {
		console.log('下拉刷新');
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
		refreshData()
	})

	onReachBottom(() => {
		console.log('触底加载更多');
		getList();
	})

	function getList() {
		if (!state.isMore) {
			util.showTip('没有更多了');
			return;
		}
		let params = {
			falg: 'user',
			skip: state.list.length,
		}
		request.get('address/list', params).then(res => {
			console.log('收货地址', res);
			state.isMore = res.data.is_more;
			if (state.list.length == 0) {
				state.list = res.data.list;
			} else {
				state.list = state.list.concat(res.data.list);
			}
		})
	}

	const useAddress = (item) => {
		console.log('使用地址', item);
		uni.$emit('addres_ok', item);
		uni.navigateBack({
			delta: 1
		})
	}

	const delAddress = (item) => {
		uni.showModal({
			title: '提示',
			content: '确认要删除收货地址吗？',
			success: function(res) {
				if (res.confirm) {
					console.log('用户点击确定');
					request.post('address/del', {
						id: item.id
					}).then(res => {
						console.log('删除地址', res);
						util.showTip(res.msg);
						if (res.code == 1) {
							refreshData();
						}
					})
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
	}

	function refreshData() {
		state.isMore = true;
		state.list = [];
		getList();
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	}

	const {
		title,
		themeColor,
		imgHost,
		isMore,
		list,
	} = toRefs(state);
</script>

<style lang="scss">
	page {
		height: 100%;
		background-color: #f3f3f3;
	}

	.address {
		display: flex;
		flex-direction: column;
		height: 100%;
		padding: 15rpx;

		.address-list {
			background-color: $u-bg-reverse-color;
			box-sizing: border-box;
			flex: 1;
			overflow: hidden;

			.address-item {
				padding: $m24 $m20;
				border-bottom: 5px solid #f3f3f3;

				.top {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					border-bottom: 1px solid #f3f3f3;
					margin-bottom: 5rpx;
					padding-bottom: 5rpx;

					.left {
						display: flex;
						flex-direction: row;
						align-items: center;

						.name {
							font-size: $font-32;
							font-weight: bold;
						}

						.phone {
							margin-left: 5rpx;
							font-weight: bold;
						}

						.tag {
							background-color: #db0000;
							color: #fff;
							font-size: 18rpx;
							margin-left: 12rpx;
							padding: 1rpx 12rpx 1rpx 12rpx;
							border-radius: 9rpx;
						}

						.u-tag {
							margin: 0 5rpx;
						}
					}

					.right {
						color: #4d4d4d;
						font-size: 18rpx;
						margin-left: 12rpx;
						padding: 1rpx 1rpx 1rpx 12rpx;
						border-radius: 9rpx;
					}
				}

				.other {
					@include f-between;

					.site {
						flex: 1;
						margin-top: $m12;
						margin-right: $m20;
						font-size: $font-24;
						color: $u-tips-color;
					}
				}
			}
		}

		.btn-group {
			position: fixed;
			left: 0rpx;
			bottom: calc(var(--window-bottom));
			right: 0rpx;
			background-color: $u-bg-reverse-color;

			.btn {
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 40rpx;
				background: linear-gradient(to right, #125cd7, #279dfa);
				color: #fff;
				text-align: center;
			}
		}
	}
</style>